<template>
  <div class="header" :style="{ height: `${headerHeight}px`, display: `${isRegisterPage ? 'none' : 'flex'}` }">
    <div class="customer-header">
      <div class="header-left">
        <Avatar></Avatar>
        <!-- <span class="env-title">环境标题</span> -->
      </div>
      <div class="rightMenu">
        <RightMenu></RightMenu>
        <Phone></Phone>
        <div style="margin-left: 50px;">
          <UserInfo></UserInfo>
        </div>
      </div>
    </div>
    <div class="cust-container" > 
      <SearchBar></SearchBar>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import RightMenu from '~/components/rightMenu.vue'
import UserInfo from '~/components/userInfo.vue'
import SearchBar from '~/components/SearchBar.vue'
const isLoggedIn = ref(false)
const username = ref('')
const userAvatar = ref('')
const isRegisterPage = ref(false) // Assuming this is set to true when on the register page
const headerHeight = ref(150)

const showLoginModal = () => {
  // 实现登录模态框逻辑
}

const handleLogout = () => {
  // 实现退出登录逻辑
}
</script>

<style lang="scss" scoped>
.customer-header {
  padding: 0 20px;
  display: flex;
  height: 90px;
  justify-content: space-between;
  align-items: center;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(../static/nav-bg.png) no-repeat center/100%;

  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;

    .logo {
      height: 40px;
    }

    .env-title {
      font-size: 20px;
      color: #ffffff;
      font-weight: 600;
    }
  }

  .rightMenu {
    display: flex;
    align-items: center;
  }
}
</style>